<template>
  <!-- 点之间路径查询 -->
  <a-popover
    :visible="show"
    :destroy-tooltip-on-hide="true"
    :overlay-style="overlayStyle"
    placement="bottomRight"
    trigger="click"
    @visibleChange="visibleChange"
  >
    <div slot="content" class="save-section">
      <div class="popover-title">保存到可视化视图</div>
      <div class="save-item">
        <span class="item-left">位置：</span>
        <span class="save-location">我的组件</span>
      </div>
      <div class="save-item define-name">
        <span class="item-left">命名为：</span>
        <a-input v-model="graphName" size="small" class="graph-name" />
      </div>
      <div class="cancel-confirm-btn">
        <a-button class="set-btn" size="small" @click="cancel">取消</a-button>
        <a-button class="set-btn" type="primary" size="small" @click="confirm"
          >保存</a-button
        >
      </div>
    </div>
    <a-tooltip placement="top">
      <span slot="title">保存到可视化</span>
      <span
        class="graph-analysis-btn batch-select-section-tag"
        :class="{ 'prohibit-edit': !isGraphSelfCreate }"
      >
        <a-icon-font :class="{ active: show }" type="iconbaocun" />
      </span>
    </a-tooltip>
  </a-popover>
</template>

<script lang="ts">
/**
 * 点之间的路径查询 两点 / 多点  气泡卡片
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import GraphBuild from '@/store/modules/graphbuild'
import noPermissionPrompt from '@/components/graph/user-permissions'

@Component({})
export default class SavePopover extends Vue {
  @Prop({ type: Boolean, default: false }) show: boolean = false
  public graphName: string = 'graph_net' // 命名
  public overlayStyle: any = {
    width: '220px',
  }

  // 是否没有编辑权限（图构建创建者）
  public get isGraphSelfCreate() {
    return GraphBuild.isGraphSelfCreate
  }

  // 生命周期 mounted
  public mounted() {
    document.addEventListener('keyup', this.globalKeyUp)
  }
  public beforeDestroy() {
    document.removeEventListener('keyup', this.globalKeyUp)
  }

  public globalKeyUp($event: KeyboardEvent) {
    if ($event.key === 'Enter' && this.show) {
      this.confirm()
    }
  }
  // popover 显示状态
  public visibleChange(visible: boolean) {
    if (this.isGraphSelfCreate) {
      if (!GraphBuild.isBatchSave) {
        this.$message.warning('请等待 graph 存储完成后再保存到可视化！')
      } else {
        this.$emit('visible-change', visible)
      }
    } else {
      noPermissionPrompt()
    }
  }

  // 取消
  public cancel() {
    this.$emit('cancel')
  }
  // 确认
  public confirm() {
    if (this.graphName.trim().length > 0) {
      this.$emit('confirm', this.graphName)
    } else {
      this.$message.warn('请输入可视化名称！')
    }
  }
}
</script>

<style scoped lang="less">
.save-section {
  display: inline-block;
  // width: 100%;
  // title
  .popover-title {
    color: #373b52;
    font-size: 14px;
    font-weight: 500;
    height: 20px;
    letter-spacing: 1px;
    line-height: 20px;
    margin-bottom: 8px;
  }

  // 位置 命名为
  .save-item {
    align-items: center;
    color: #5d637e;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 8px;
    width: 100%;

    .item-left {
      display: inline-block;
      height: 20px;
      letter-spacing: 1px;
      line-height: 20px;
      text-align: right;
      width: 60px;
    }

    // 保存位置
    .save-location {
      cursor: pointer;
      display: inline-block;
      height: 20px;
      letter-spacing: 1px;
      line-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 60px);
    }
  }

  // 命名
  .define-name {
    .graph-name {
      width: calc(100% - 60px);
    }
  }

  // 确定按钮
  .cancel-confirm-btn {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;

    .set-btn {
      margin-left: 8px;
    }
  }
}

// icon
.graph-analysis-btn {
  align-items: center;
  border-radius: 2px;
  color: #5d637e;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  margin: 0 4px;
  padding: 4px;
  position: relative;

  &:hover {
    background-color: rgba(103, 113, 252, 0.1);
  }
}

// 禁用
.prohibit-edit {
  align-items: center;
  border-radius: 2px;
  color: #5d637e;
  cursor: not-allowed;
  display: flex;
  font-size: 16px;
  margin: 0 4px;
  opacity: 0.5;
  padding: 6px;
  position: relative;

  &:hover {
    background-color: rgba(105, 115, 255, 0.1);
  }
}

// 框选 套索 小三角
.batch-select-section-tag {
  .r-angle-right-down {
    border-right: 4px solid #5d637e;
    border-top: 4px solid transparent;
    bottom: 0;
    height: 0;
    position: absolute;
    right: 0;
    width: 0;
  }

  .angle-right-active {
    border-right: 4px solid #6973ff;
  }
}

// 功能激活，
.active {
  color: #6973ff;
}
</style>
